<template>
  <div id="activitySearch">
    <div class="search-box">
      <el-form
        ref="ruleForm"
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
      >
        <el-form-item label="消息名称" prop="name">
          <el-input
            v-model="formInline.name"
            placeholder="请输出消息名称"
            clearable
          >
          </el-input>
        </el-form-item>
        <el-form-item label="活动类型" prop="activityType">
          <el-select
            v-model="formInline.activityType"
            placeholder="全部"
            clearable
            filterable
          >
            <el-option
              v-for="item in avtivityTypeList"
              :key="item.id"
              :label="item.note"
              :value="item.activityType"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发送状态" prop="status">
          <el-select
            v-model="formInline.status"
            placeholder="全部"
            clearable
            filterable
          >
            <el-option
              v-for="(item, index) in sendState"
              :key="index"
              :label="item.dictLabel"
              :value="item.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建人" prop="userId">
          <el-select v-model="formInline.userId" clearable filterable>
            <el-option
              v-for="item in creatersList"
              :key="item.userId"
              :label="item.trueName"
              :value="item.userId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间" prop="createTime">
          <el-date-picker
            v-model="formInline.createTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="发送时间" prop="sendTime">
          <el-date-picker
            v-model="formInline.sendTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item class="s-btn">
          <el-button
            type="success"
            icon="el-icon-search"
            @click="toSearch('ruleForm')"
          >
            查询
          </el-button>
          <el-button type="success" plain @click="reset"> 重置 </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { sysNormalDisable } from '@utils/dictionariesFunc'
import { getUsers } from '@/api/notice'
export default {
  props: {
    avtivityTypeList: Array
  },
  data() {
    return {
      sendState: [],
      creatersList: [],
      formInline: {
        name: undefined,
        activityType: undefined,
        status: undefined,
        userId: undefined,
        startDate: undefined, //创建开始时间
        endDate: undefined, //创建结束时间
        sendTimeStart: undefined, //发送开始时间
        sendTimeEnd: undefined, //发送结束时间
        createTime: [],
        sendTime: []
      }
    }
  },
  watch: {
    'formInline.createTime': {
      handler(newVal, oldVal) {
        if (newVal && newVal.length > 1) {
          this.formInline.startDate = newVal[0]
          this.formInline.endDate = newVal[1]
        } else {
          this.formInline.startDate = undefined
          this.formInline.endDate = undefined
        }
      },
      deep: true
    },
    'formInline.sendTime': {
      handler(newVal, oldVal) {
        if (newVal && newVal.length > 1) {
          this.formInline.sendTimeStart = newVal[0]
          this.formInline.sendTimeEnd = newVal[1]
        } else {
          this.formInline.sendTimeStart = undefined
          this.formInline.sendTimeEnd = undefined
        }
      },
      deep: true
    }
  },
  mounted() {
    this.getStatusList()
  },
  methods: {
    //获取字典
    async getStatusList() {
      //发送状态
      this.sendState = await sysNormalDisable('send_status')
      //创建人
      let roles = [
        { id: '311' },
        { id: '301' },
        { id: '296' },
        { id: '292' },
        { id: '236' },
        { id: '257' }
      ]
      getUsers(roles, (response) => {
        this.creatersList = response
      })
    },
    //搜索
    toSearch() {
      this.$emit('toSearch', this.formInline)
    },
    //重置
    reset() {
      this.$refs['ruleForm'].resetFields()
    }
  }
}
</script>

<style lang="less"></style>
